<template>
    <div class="">
        <div class="line"><span>即将上映</span></div>
        <ul class="m-list m-yb">
            <li v-for="item in soonList">
                <img :src="item.cover.origin" alt="">
                <div class="list-box">
                    <div class="left">
                        <p class="titl">{{item.name}}</p>
                    </div>
                    <div class="right">{{item.premiereAt | formatDate}}</div>
                </div>
            </li>
        </ul>
        <div class="more-button">更多即将上映电影</div>
    </div>
</template>

<script>
    import $ from 'jquery';

    export default {
        data: function() {
            return {
                soonList: []
            }
        },
        filters: {
            'formatDate': function(val) {
                var time = new Date(val);
                var m = time.getMonth() + 1;
                var d = time.getDate();
                return m + '月' + d + '日上映';
            }
        },
        mounted: function() {

            var url = 'http://localhost:3000/coming-soon?time=' + new Date().getTime();
            var that = this;
            $.get(url, function(res) {
                that.soonList = res.data.films

                // 要吧那个蒙层给关闭

                setTimeout(function() {
                    that.$parent.isMark = false;
                }, 100)
            })
        }
    }    
</script>